<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<title>数据列表</title>
<%@include file="common/include.jsp"%>
<script type="text/javascript">
	$(function() {
		var starttime = $('#starttime').val();
		$("#starttime").bind("change", function() {
			starttime = $('#starttime').val();
			$('#endtime').datetimepicker('setStartDate', starttime);
		});
		var endtime = $('#endtime').val();
		$("#endtime").bind("change", function() {
			endtime = $('#endtime').val();
			$('#starttime').datetimepicker('setEndDate', endtime);
		});
		$('#starttime').datetimepicker({
			language : 'zh-CN',
			weekStart : 1,
			todayBtn : 1,
			autoclose : 1,
			todayHighlight : 1,
			startView : 2,
			minView : 2,
			endDate : endtime,
			forceParse : 0
		});
		$('#endtime').datetimepicker({
			language : 'zh-CN',
			weekStart : 1,
			todayBtn : 1,
			autoclose : 1,
			todayHighlight : 1,
			startView : 2,
			minView : 2,
			startDate : starttime,
			forceParse : 0
		});
	});

	function detail(id) {
		$.ajax({
			type : 'post',
			url : '${ctx}/detail/' + id,
			dataType : 'json',
			success : function(data) {
				if (data.success) {
					//标题
					$("#myModalLabel").empty();
					$("#myModalLabel").append(
							data.obj.systemName + " " + data.obj.logTime + " "
									+ data.obj.logLevel + " "
									+ data.obj.javaPath);
					//内容
					$("#myModalBody").empty();
					$("#myModalBody").append(data.obj.logContent);

					var search_content = '${logContent}';
					if (search_content != '') {
						re = new RegExp(search_content, "g");
						$("#myModalBody").html(
								function() {
									return $(this).html().replace(
											re,
											"<font style=\"color:red\">"
													+ search_content
													+ "</font>");
								});
					}
				} else {
					//标题
					$("#myModalLabel").empty(data.msg);
					$("#myModalLabel").append();
					//内容
					$("#myModalBody").empty();
				}
			}
		});
		$('#myModal').modal('show');
	}
</script>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-lg-12">
				<br />
				<div class="panel panel-default">
					<div class="panel-body">
						<form class="form-inline" role="form" action="${ctx}/search"
							method="post">
							<div class="form-group">
								<label class="sr-only" for="systemName">系统名称</label> <input
									type="text" class="form-control" id="systemName"
									name="systemName" value="${systemName}" placeholder="系统名称">
							</div>
							<div class="form-group">
								<label class="sr-only" for="content">日志级别</label><select
									class="form-control" id="logLevel" name="logLevel">
									<option value="">全部</option>
									<option value="TRACE"
										<c:if test="${logLevel=='TRACE'}">selected</c:if>>TRACE</option>
									<option value="DEBUG"
										<c:if test="${logLevel=='DEBUG'}">selected</c:if>>DEBUG</option>
									<option value="INFO"
										<c:if test="${logLevel=='INFO'}">selected</c:if>>INFO</option>
									<option value="WARN"
										<c:if test="${logLevel=='WARN'}">selected</c:if>>WARN</option>
									<option value="ERROR"
										<c:if test="${logLevel=='ERROR'}">selected</c:if>>ERROR</option>
								</select>
							</div>
							<div class="form-group">
								<label class="sr-only" for="content">日志内容</label> <input
									type="text" class="form-control" id="logContent"
									name="logContent" value="${logContent}" placeholder="日志内容">
							</div>
							<div class="form-group">
								<label class="control-label">开始日期</label> <input type="text"
									class="form-control" placeholder="开始日期" name="starttime"
									id="starttime" readonly value="${starttime}"
									data-date-format="yyyy-mm-dd"> <label
									class=" control-label">结束日期</label> <input type="text"
									class="form-control" placeholder="结束日期" name="endtime"
									id="endtime" readonly value="${endtime}"
									data-date-format="yyyy-mm-dd">
							</div>
							<button type="submit" class="btn btn-default">查询</button>
							<button type="reset" class="btn btn-default">重置</button>
						</form>
					</div>
					<table id="table_id" class="table table-bordered">
						<tbody>
							<c:forEach var="stoLog" items="${stoLogList}">
								<tr>
									<td>
										<button class="btn btn-link" onclick="detail('${stoLog.id}');">
											${fn:substring(stoLog.logContent, 0, 128)}</button>
									</td>
									<td>${stoLog.logTime}&nbsp;&nbsp;${stoLog.logLevel}</td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>

	<!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" style="width: 1440px;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">×</button>
					<h4 class="modal-title" id="myModalLabel"></h4>
				</div>
				<div class="modal-body" id="myModalBody"></div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->
</body>
<script type="text/javascript">
	var search_content = '${logContent}';
	if (search_content != '') {
		re = new RegExp(search_content, "g");
		$("#table_id").html(
				function() {
					return $(this).html().replace(
							re,
							"<font style=\"color:red\">" + search_content
									+ "</font>");
				});
	}
</script>
</html>
